<template>
  <div class="boot-colorpicker-wrapper">
    <div class="color-picker input-group colorpicker-component colorpicker-element">
      <input
        :id="elId"
        type="text"
        class="color-input form-control input-lg"
        v-model="currColor"
      />
      <span class="color-view input-group-addon">
        <i :style="{background:currColor}"></i>
      </span>
    </div>
  </div>
</template>
<script>

export default {
  name: 'BootstrapColorPicker',
  props: {
    color: {
      type: String,
      default: '#ff0000',
    },
    id: String,
  },
  watch: {
    color: {
      handler: function (val) {
        if (!this.isEmpty(val)) {
          if (this.currColor != val) {
            this.currColor = val;
          }
        }
      },
      immediate: true
    },
    id: {
      handler: function (val) {
        if (!this.isEmpty(val)) {
          if (this.elId != val) {
            this.elId = val;
          }
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      currColor: '#dd0000',
      elId: 'colorPicker'
    }
  },
  mounted() {
    let me = this;
    this.jq('#' + this.elId).colorpicker().on('colorpickerChange', function (e) {
      me.currColor = e.color.toString();
      me.$emit('color-change', me.currColor);
    })
  },
  methods: {
  },
}
</script>
<style rel="stylesheet/scss" >
.colorpicker-bs-popover {
  z-index: 10000 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";

.boot-colorpicker-wrapper {
  .color-picker {
    width: 200px;
    margin-bottom: 5px;
    &:after {
      @include clearFloat;
    }
    .color-input,
    .color-view {
      float: left;
    }
    .color-input {
      width: calc(100% - 50px);
      height: 30px;
      @include borderRadius(4px, "topLeft");
      @include borderRadius(4px, "bottomLeft");
      @include borderRadius(0px, "topRight");
      @include borderRadius(0px, "bottomRight");
      border: 1px solid #dedede;
      border-right: none;
      padding: 2px 5px;
      @include boxSizing(border-box);
    }
    .color-view {
      width: 30px;
      height: 30px;
      @include borderRadius(4px, "topRight");
      @include borderRadius(4px, "bottomRight");
      border: 1px solid #dedede;
      background: #f1f1f1;
      padding: 9px;
      @include boxSizing(border-box);
      i {
        display: block;
        width: 10px;
        height: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
